<template>
	<view>
		<view class="search">
			<u-search placeholder="搜索设备" :show-action="false" v-model="keyword"></u-search>
		</view>
		<view class="step">
			<text style="color: #3C7EFF;">{{ title }}</text>
			<image src="/static/icon-jiantou.png" mode=""></image>
			<text style="color: #3C7EFF;">物联网片区</text>
			<image src="/static/icon-jiantou.png" mode=""></image>
			<text>片区管理</text>
		</view>
		<view class="project-list" v-if="!list.length">
			<view class="no-list">
				<image src="/static/icon-null-page.png" mode=""></image>
				<text>暂无资源哦～</text>
			</view>
		</view>
		
		<view class="list-content" v-else>
			<scroll-view class="scroll-list" scroll-y="true">
				<view class="list-box" v-for="(item, index) in list" :key="index">
					<view class="list-box-cell">
						<view class="list-cell-body">
							<image src="/static/icon-device.png" mode="" class="left-image"></image>
							<view class="list-info">
								<view class="list-li">
									<text class="h3">{{ item.name }}</text>
								</view>
								<view class="list-li">
									<text>设备类型：通用设备</text>
								</view>
								<view class="list-li">
									<text>设备编码：2746H8S284K</text>
								</view>
								<view class="list-li">
									<text>所属项目：杭州人社局</text>
								</view>
								<view class="list-li">
									<text>负责人：赵一</text>
								</view>
								<view class="list-li">
									<text>负责人电话：18837495092</text>
								</view>
							</view>
						</view>
						<view class="list-cell-footer">
							<text>到期时间：2023-11-26 14:24:13</text>
							<view class="btns">
								<view class="handle" @click="navTo(`/pages/project/device-info?title=${item.name}`)">查看详情</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				list: [
					{ name: '垂直电梯', project: '杭州人社局', username: '陈毅', phone: '18837489034' }
				]
			};
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			this.title = option.title
		},
		methods: {
			navTo(href) {
				uni.navigateTo({
					url: href	
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.search {
	height: 88rpx;
	padding: 12rpx 30rpx;
	background: #fff;
}
.step {
	display: flex;
	align-items: center;
	background: #fff;
	line-height: 1;
	padding: 16rpx 30rpx;
	text {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
	}
	image {
		width: 44rpx;
		height: 44rpx;
	}
}
.project-list {
	height: calc(100vh - var(--window-top) - var(--window-bottom) - 164rpx);
	background: #fff;
	.no-list {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 30%;
		left: 50%;
		transform: translate(-50%, -50%);
		image {
			width: 192rpx;
			height: 172rpx;
		}
		text {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #999999;
			line-height: 48rpx;
			text-align: center;
			font-style: normal;
		}
	}
}
.list-content {
	margin: 18rpx 0;
	.list-box {
		padding: 0 30rpx 30rpx 30rpx;
		.list-box-cell {
			width: 100%;
			height: 408rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 24rpx 30rpx;
			margin-bottom: 16rpx;
			&:last-child {
				margin: 0;
			}
			.list-cell-body {
				display: flex;
				border-bottom: 1px solid rgba(0, 0, 0, .1);
				padding-bottom: 12rpx;
				.left-image {
					width: 184rpx;
					height: 184rpx;
					margin-right: 24rpx;
				}
				.list-li {
					display: flex;
					align-items: center;
					line-height: 1;
					margin-bottom: 20rpx;
					.h3 {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #333333;
						line-height: 44rpx;
						text-align: left;
						font-style: normal;
					}
					text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 12px;
						color: #666666;
						line-height: 12px;
						text-align: left;
						font-style: normal;
					}
				}
			}
			.list-cell-footer {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 14rpx;
				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #999999;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}
				.btns {
					display: flex;
					align-items: center;
					justify-content: space-between;
					.extension {
						width: 128rpx;
						height: 48rpx;
						border-radius: 8rpx;
						border: 1px solid #3C7EFF;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #3C7EFF;
						line-height: 48rpx;
						text-align: center;
						font-style: normal;
						margin-right: 24rpx;
					}
					.handle {
						width: 128rpx;
						height: 48rpx;
						border-radius: 8rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						background: #3C7EFF;
						color: #FFFFFF;
						line-height: 48rpx;
						text-align: center;
						font-style: normal;
					}
				}
			}
		}
	}
}
</style>
